<template>
  <div :style="{ 'margin-left': '-20px' }">
    <bfe-form ref="formObj" :model="formObj" label-position="top" class="formContainer">
      <div class="flex-container">
        <div class="item">
          <bfe-form-item label="报告机构" prop="orgRefno">
            <bfe-input v-model="formObj.rptOrgName" :readonly="true" size="small" type="input" :maxlength="500"
              :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
          </bfe-form-item>
        </div>
        <div class="item">
          <bfe-form-item label="报告期" prop="rptpd">
            <bfe-date-picker v-model="formObj.rptpd" type="month" size="small" disabled
              :placeholder="$t('stm.validateTip.pleaseSelect')" format />
          </bfe-form-item>
        </div>
        <div class="item">
          <bfe-form-item label="报告人" prop="rptPer">
            <bfe-input v-model="formObj.rptPer" :readonly="true" size="small" type="input" :maxlength="100"
              :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
          </bfe-form-item>
        </div>
      </div>
      <div class="flex-container">
        <div class="item">
          <bfe-form-item label="联系电话" prop="cntel" :rules="formRules.cntel">
            <bfe-input v-model="formObj.cntel" :readonly="type === 'view'" :maxlength="20"
              :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
          </bfe-form-item>
        </div>
        <div class="item">
          <bfe-form-item label="联系电邮" prop="email">
            <bfe-input v-model="formObj.email" :readonly="type === 'view'" size="small" type="input" :maxlength="100"
              :placeholder="$t('stm.common.pleaseInput')"></bfe-input>
          </bfe-form-item>
        </div>
      </div>
    </bfe-form>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    formObj: {
      type: Object,
      default: () => { },
    },
    type: {
      type: String,
      default: "",
    },
    date: {
      type: String,
      default: "",
    },
    reqOrgNo: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      formRules: {
        cntel: [
          {
            validator: (rule, value, callback) => {
              // 手机号码校验
              const reg = /^[0-9]+(-[0-9]+)?$/
              if (value && !reg.test(value)) {
                callback(new Error('请输入正确手机号码'))
              }
              callback()
            },
            trigger: "blur",
          },
        ],
      }
    };
  },
  computed: {
    ...mapState({
      language: (state) => state.base.language,
      userInfo: (state) => state.base.userInfo,
    }),
  },
  watch: {
    date: {
      handler(newValue) {
        console.log(newValue, "传入的时间");
        this.formObj.rptpd = newValue;
      },
      deep: true,
      immediate: true,
    },
    userInfo: {
      handler(newVal) {
        console.log(newVal, "》》》》》最新的用户数据");
        if (newVal) {
          this.formObj.rptOrgNo = this.reqOrgNo || "";
          this.formObj.rptOrgName = newVal.userAhrOrgName || "";
          this.formObj.rptPer = `${newVal.usnm} （${newVal.usno}）` || "";
        }
      },
      immediate: true, // 立即执行一次
      deep: true,
    },
  },
  created() {
    if (this.type !== "add") {
      this.initData();
    }
  },
  methods: {
    // 初始化数据
    initData() {
      const params = {
        optCode: "STM002GET1801",
        payload: { ...this.formObj, areaFlg: 'in' },
      };
      this.$p2svr(
        this.$api["_01_TSTM02MONRPT1800"],
        "RequestPoAuth",
        params
      ).then((res) => {
        this.formObj.rptOrgNo = res.payload.rptOrgNo || "";
        this.formObj.rptOrgName = res.payload.rptOrgName || "";
        this.formObj.rptpd = res.payload.rptpd || "";
        this.formObj.rptPer = res.payload.rptPer || "";
        this.formObj.cntel = res.payload.cntel || "";
        this.formObj.email = res.payload.email || "";
      });
    },
    validateForm() {
      let flag = false
      this.$refs.formObj.validate((ok) => {
        if (ok) {
          flag = true
        } else {
        }
      })
      return flag
    },
  },
};
</script>

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-start;
  /* 表单项内容左对齐 */
}

.item {
  flex: 0 0 300px;
  /* 固定宽度 300px */
  min-width: 300px;
}

/* 全局样式，确保表单容器左对齐 */
.formContainer {
  width: 100%;
  max-width: 1200px;
  /* 根据需要调整最大宽度 */
  margin: 0;
  padding: 20px;
}

/* 确保表单内容左对齐 */
.bfe-form-item {
  text-align: left;
}
</style>